<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量操作</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <a href="/static/resources/导入模板.xlsx"><button type="button" class="layui-btn">点击下载模板</button></a>

    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
            <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
    </div>

    <button type="button" class="layui-btn">点击上传文件</button>
</body>

<script>
layui.use(function(){
  var upload = layui.upload;
  var $ = layui.$;
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-drag',
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    done: function(res){
      layer.msg('上传成功');
      $('#ID-upload-demo-preview').removeClass('layui-hide')
      .find('img').attr('src', res.files.file);
      console.log(res)
    }
  });
});
</script>

</html>